import React from 'react';
import { useTranslation } from 'react-i18next';
import LanguageSelector from './LanguageSelector';

const I18nTest = () => {
  const { t, i18n } = useTranslation();

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <div style={{ marginBottom: '20px' }}>
        <h2>🌍 国际化测试页面</h2>
        <p>当前语言: {i18n.language}</p>
        <LanguageSelector />
      </div>
      
      <div style={{ marginBottom: '20px', padding: '15px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h3>登录页面文本测试</h3>
        <ul>
          <li>标题: {t('login.title')}</li>
          <li>密码登录: {t('login.passwordLogin')}</li>
          <li>验证码登录: {t('login.codeLogin')}</li>
          <li>手机号占位符: {t('login.phonePlaceholder')}</li>
          <li>密码占位符: {t('login.passwordPlaceholder')}</li>
          <li>登录按钮: {t('login.loginButton')}</li>
          <li>忘记密码: {t('login.forgotPassword')}</li>
          <li>立即注册: {t('login.register')}</li>
        </ul>
      </div>
      
      <div style={{ marginBottom: '20px', padding: '15px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h3>安全验证文本测试</h3>
        <ul>
          <li>安全验证: {t('security.title')}</li>
          <li>返回: {t('security.back')}</li>
          <li>风险用户: {t('security.riskUser')}</li>
          <li>选择验证方式: {t('security.selectMethod')}</li>
          <li>确认验证: {t('security.verify')}</li>
          <li>取消: {t('security.cancel')}</li>
        </ul>
      </div>
      
      <div style={{ marginBottom: '20px', padding: '15px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h3>语言选择器文本测试</h3>
        <ul>
          <li>选择语言: {t('language.select')}</li>
          <li>中文: {t('language.chinese')}</li>
          <li>英文: {t('language.english')}</li>
          <li>日语: {t('language.japanese')}</li>
          <li>韩语: {t('language.korean')}</li>
        </ul>
      </div>
      
      <div style={{ marginBottom: '20px', padding: '15px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h3>通用文本测试</h3>
        <ul>
          <li>加载中: {t('common.loading')}</li>
          <li>成功: {t('common.success')}</li>
          <li>失败: {t('common.failed')}</li>
          <li>确认: {t('common.confirm')}</li>
          <li>取消: {t('common.cancel')}</li>
          <li>记住我: {t('common.rememberMe')}</li>
        </ul>
      </div>
      
      <div style={{ padding: '15px', backgroundColor: '#f0f8ff', borderRadius: '8px' }}>
        <h3>✅ 功能测试完成</h3>
        <p>
          请尝试切换不同的语言，观察文本是否正确显示。
          如果所有文本都能正确切换语言，说明国际化功能已成功集成！
        </p>
        <p>
          <strong>使用方法：</strong>点击右上角的语言选择器，选择不同语言即可切换界面语言。
        </p>
      </div>
    </div>
  );
};

export default I18nTest; 